<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@  taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@ taglib prefix="my" uri="http://gson.cn/jsp/jstl/mytags" %>
        <%
           String path = request.getContextPath();
           String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <base href="<%= basePath%>">
   <link href="static/css/sp.css" rel="stylesheet" type="text/css">
  <title>商品详情</title>
  <link rel="icon" href="//D:/b2c_favicon.ico" type="image/x-icon">
 </head>

<body><div class="body">
<div class="tou">
	<img src="static/img/think.png" width="94" height="31" class="logo">
	<div class="t"><a>联想商城</a>
		<a>Think官网</a>
		<a>急速达</a>
		<a>服务与支持</a>
		<a>社区</a></div>
<div class="ss">
<input type="text"><button type="button">搜索</button>
</div>
<div class="dl"> <a title="用户名" class="deng">登录</a>|<a> 退出</a> </div>
<div class="tp">
	<img src="../static/img/购物车.png" width="30" height="30">
</div>
</div>
<div class="xq">
<div class="con">
<a class="sy">首页</a><a class="sp"> >  商品详情 >  ${shop.gtradename} ${shop.gspbh1}</a>
</div>
</div>
<div class="magnifier" id="magnifier1">
		<div class="magnifier-container">
			<div class="images-cover"></div>
			<!--当前图片显示容器-->
			<div class="move-view"></div>
			<!--跟随鼠标移动的盒子-->
		</div>
		<div class="magnifier-assembly">
			<div class="magnifier-btn">
				<span class="magnifier-btn-left">&lt;</span>
				<span class="magnifier-btn-right">&gt;</span>
			</div>
			<!--按钮组-->
			<div class="magnifier-line">
				<ul class="clearfix animation03">
				<c:forEach items="${requestScope.img}" var="i">
					<li>
						<div class="small-img">
							<img src="${i.iway}" />
						</div>
					</li>
				</c:forEach>
				</ul>
			</div>
		</div>
		<div class="magnifier-view"></div>
	</div>
</div><div class="bh"><a>商品编号： ${shop.gspbh1}</a><span>收藏</span></div>
	<div class="you">
	<div title="ThinkPad X1 tablet 平板笔记本 20JBA00H00" class="cp"> ${shop.gtradename	} ${shop.gspbh1}</div>
	<div class="dec">${shop.gbewrite}</div>
	<div class="cc">颜色/尺寸:</div>
	<div class="big">
	<div title="14.0英寸/银色" class="big1" >14.0英寸/银色</div>
	<div title="14.0英寸/黑色" class="big1" >14.0英寸/黑色</div>
	</div>
	<div class="xt">处理器/操作系统:</div>
	<div class="big">
	<div title="i7-7600U/Windows 10 专业版" class="big1" >i7-7600U/Windows 10 专业版</div>
	<div title="i7-7500U/Windows 10 家庭版" class="big1" >i7-7500U/Windows 10 家庭版</div>
	<div title="i5-7200U/Windows 10 家庭版"  class="big1" >i5-7200U/Windows 10 家庭版</div>
	</div>
	<div class="nc">内存/硬盘/显卡:</div>
	<div class="big">
	<div title="16GB/512GB SSD/集显" class="big1" >16GB/512GB SSD/集显</div>
	<div title="16GB/1TB SSD/集显" class="big1" >16GB/1TB SSD/集显</div>
	<div title="8GB/256GB SSD/集成显卡"  class="big1" >8GB/256GB SSD/集成显卡</div>
	<div title="8GB/512GB SSD/集显" class="big1" >8GB/512GB SSD/集显</div>
	<div title="8GB/256GB SSD/集显" class="big1" >8GB/256GB SSD/集显</div>
	</div>
	</div>
	
<div class="box1">
<a style="color:red" id="a3">商品详情</a>
<a id="a1">配置信息</a>
<a id="a2">商品评价</a>

</div>

<div class="imgs">
<jsp:include page="/jsps/sptp.jsp">
<jsp:param value="1" name="i"/>
</jsp:include>
</div>
<div class="think">
	    <a class="db" title="豆瓣" >豆瓣</a>
	    <a class="wb" title="微博" >微博</a>
	    <a class="rr" title="人人" >人人</a>
		<a class="tx" title="腾讯微博">腾讯微博</a>
</div>
<div class="link">
<a style="color:red">使用条款</a>  | <a>关于会员</a> |<a>服务与支持</a> |
<a style="color:red">官网意见反馈</a> |<a>隐私保护</a> |<a>联想商城</a> |
<a>神奇工场</a> |<a>合作伙伴认证</a> |<a>联系我们</a> |
<a>黒匠专属</a> |<a>经销商注册</a></div>
<div class="copy">
<p>版权所有：1998-2017 联想集团|<a> 法律公告<a> |<a> 京ICP备11035381 </a>
|京公网安备110108007970号| <a> 营业执照：110000410127232</a></p>
<p>超极本,赛扬、Celeron Inside、CoreInside、英特尔、英特尔标识、英特尔凌动、Intel Atom Inside、
英特尔酷睿、Intel Inside, Intel Inside 标识、英特尔欢跃、英特尔博锐、安腾、Itanium Inside、</p>
<p>奔腾、Pentium Inside、vPro Inside、至强、至强 Phi 和 Xeon Inside 均是英特尔公司在美国或其他国家的商标。ThinkPad是联想公司的注册商标。</p>
</div>
<div class="zz"></div>
<div class="buy">
<div class="ewm"><img src="static/img/ewm.jpg" ></div>
<div class="zx"><img src="static/img/goumaizixun.jpg"></div>
<div class="operate"> 
<span class="bg"></span>
<a>支持以旧换新，闲置笔记本回收</a>
</div>
<div class="right">
<span class="stock">有库存</span>
<input class="jian" type="button" value="-" style="height:25px;width:25px"> 
<input  type="text" class="txt" value="1"/>
<input class="jia" type="button" value="+" style="height:25px;width:25px">
<span class="rmb">RMB</span> 
<span class="je">${shop.gprice}</span>
<div class="gm">
<button class="ljgm" title="立即购买">立即购买</button>
</div>
<button class="gwc" title="加入购物车"style="height:40px;width:120px">加入购物车</button>
</div>
</div>
</div></body>
</html>
<script src="static/js/slide.js" type="text/javascript"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="static/js/magnifier.js"></script>
<script>

$(function(){ //这里是加减按钮都启用的情况  
	 $(".big1").click(function(){
				$(this).css("border","1px red solid");
				$(this).siblings().css("border"," 1px solid #b4b4b4");
			});
	 $(".box1 a").click(function(){
				$(this).css("color","red");
				$(this).siblings().css("color","#000000");
			});
    var t = $(".txt"); 
    $(".jia").click(function(){       
        t.val(parseInt(t.val())+1)
        setTotal();  
    })  
    $(".jian").click(function(){  
        if(t.val()>1){  
        t.val(parseInt(t.val())-1);  
        }  
        else{  
        alert("至少购买一件哦！");  
        }  
        setTotal();  
    })  
});  

 $(function() {
	var magnifierConfig = {
		magnifier : "#magnifier1",
		width : 500,
		height : 500,
		moveWidth : null,
		zoom : 5
	};
	var _magnifier = magnifier(magnifierConfig);
	
		$("#a1").click(function(){
		$(".imgs").empty();
		$(".imgs").load("jsps/pzxx.jsp");  
		});

		$("#a2").click(function(){
		$(".imgs").empty();
		$(".imgs").load("jsps/sppj.jsp")  
		});

		$("#a3").click(function(){
		$(".imgs").empty();
		$(".imgs").load("jsps/sptp.jsp")  
		});
});
</script> 
</body>
</html>

